<template>
  <div class="orderALL">
    <div class="order">
        <div class="heads">
        <div class="headers">
          <div>全部订单</div>
        </div>
        <div class="bar">
          <div v-for="(item,index) in bars" :key="index + 100" :class="item.con" @click="act(index)">
              {{item.text}}
           </div>
        </div>
      </div>
      <all v-show="bars[0].flag"></all>
      <before v-show="bars[2].flag"></before>
      <payed v-show="bars[1].flag"></payed>
      <after v-show="bars[3].flag"></after>
      <footer-btn></footer-btn>
    </div>
  </div>
</template>

<style lang = "less">
.order {
  height: 100vh;
  width: 100vw;
  background: rgb(240, 242, 245);
  .lv {
    color: rgb(0, 212, 227);
  }
  .grey {
    color: grey;
  }
  .grayLine {
    height: 1px;
    background: #e0e0e0;
    margin: 10px;
  }
  .headers {
    padding: 10px;
    color: white;
    background: rgb(76, 192, 228);
  }
  .bar {
    display: flex;
    padding-top: 10px;
    margin: 10px;
    margin-top: 0;
    justify-content: space-between;
    color: gray;
    div {
      margin: 10px 0;
      background: white;
      padding: 6px 20px;
      border-radius: 30px;
      font-size: 12px;
      
    }
    .active {
        background-color: rgb(191, 244, 247);
        border: 1px solid rgb(0, 212, 227);
        color: rgb(0, 212, 227);
      }
  }
}
</style>

<script>
import footerBtn from "../components/footerBtn.vue";
import all from "../components/all.vue";
import payed from "../components/payed.vue";
import before from "../components/before.vue";
import after from "../components/after.vue";
export default {
  data() {
    return {
      payFlag:false,
      bars:[
        {text:"全部" , con:"active" ,flag:true},
        {text:"待出行" , con:"",flag:false},
        {text:"待支付" , con:"",flag:false},
        {text:"退款/售后" , con:"",flag:false}
      ],
      flag: true,
      newOrders: [
        {
          cardName: "",
          prize: 0,
          num: 1,
          flagPay: false,
        },
      ],
      orders: [],
    };
  },
  methods: {
    act(index){
      for(let i = 0;i < this.bars.length;i++){
        this.bars[i].con = "";
        this.bars[i].flag = false;
      }
      this.bars[index].con = "active";
       this.bars[index].flag = true;
    },
  },
  components: {
    footerBtn,
    payed,
    before,
    after,
    all
  },
  created() {
    for(let i = 0;i < this.$store.state.orderDatas.length;i++){
      this.orders.push(this.$store.state.orderDatas[i]);
    }
    // console.log("11",this.$store.state.orderDatas);
  },
  mounted() {
    if (this.orders.length == 0) {
      this.flag = true;
    } else {
      this.flag = false;
    }
  },
};
</script>